<template>
	<div class="home front">
		<div class="home-container">
			<Header></Header>
			<!-- <div class="left_bg">
				<img class="side_logo" src="@/assets/front-img/front_home_middle_logo_left.png" alt="">
			</div>
			<div class="right_bg">
				<img class="side_logo" src="@/assets/front-img/front_home_middle_logo_right.png" alt="">
			</div> -->
			<div class="banner_bg">
				<div class="banner_content">
					<!-- 左边分类模块 -->
					<div class="nav_bg">
						<div class="nav_item" @mouseenter="updateIcon(index, 'hover')" @mouseleave="updateIcon(index, '')" v-for="(item,index) in chayeList" :key="index" @click="$router.push({path: '/front-goodList?',query:{item:item}})">
							<img :src="getImageUrl(index)" alt="" class="nav_icon">
							<div>{{item.name}}</div>
						</div>
					</div>
					<div class="banner">
						<el-carousel height="420px">
							<el-carousel-item v-for="item in sylbtList" :key="item.id">
								<div @click="selectLb(item)" class="bg-img" :style="{backgroundImage:`url(${item.image})`}">
								</div>
							</el-carousel-item>
						</el-carousel>
					</div>
					
					<!-- 右边登录模块 -->
					<div class="right_section">
						<div class="login">
							<div class="imgs">
								<img src="../../../assets/logo.png">
							</div>
							<div v-if="this.userInfo" class="hi">欢迎您回来！</div>
							<div v-else class="hi">Hi~您好！</div>
							<div class="button" v-if="userInfo && userInfo.id">
								<div class="left_btn" @click="toBackend">工作台</div>
								<div class="right_btn" @click="logout">退出登录</div>
							</div>
							<div class="button" v-else>
								<div class="left_btn" @click="toLogin(0)">登录</div>
								<div class="right_btn" @click="toLogin(1)">注册</div>
							</div>
							<div class="line"></div>
						</div>
						<!-- 快讯 -->
						<div class="news">
							<div class="news_title">快讯</div>
							<div class="news_content">{{ notice }}</div>
						</div>
					</div>
				</div>
			</div>

			<!-- <div class="trade_bg">
				<div class="trade_content">
					<div class="trade_section" @click="$router.push({path: '/agentList'})" style="background-color: rgba(132, 173, 245, 1)">
						<div class="trade_title">经纪人专区</div>
						<div class="trade_detail">蓝海前沿 商机无限</div>
						<img class="trade_icon" :src="require('@/assets/front-img/nav_jjrzq.png')" alt="">
					</div>
					<div class="trade_section" @click="$router.push({path: '/front-collection-list'})" style="background-color: rgba(242, 139, 133, 1)">
						<div class="trade_title">集采交易</div>
						<div class="trade_detail">商家合作 集中采购</div>
						<img class="trade_icon" :src="require('@/assets/front-img/nav_ptjy.png')" alt="">
					</div>
					<div class="trade_section" @click="$router.push({path: '/front-transaction-list'})" style="background-color: rgba(149, 162, 207, 1)">
						<div class="trade_title">委托交易</div>
						<div class="trade_detail">平台资源 代买代购</div>
						<img class="trade_icon" :src="require('@/assets/front-img/nav_wtjy.png')" alt="">
					</div>
					<div class="trade_section" @click="$router.push({path: '/front-together-list'})" style="background-color: rgba(74, 182, 236, 1)"> 
						<div class="trade_title">买方挂牌</div>
						<div class="trade_detail">需求挂牌 优价采购</div>
						<img class="trade_icon" :src="require('@/assets/front-img/nav_mfgp.png')" alt="">
					</div>
					<div class="trade_section" @click="$router.push({path: '/front-bidding-list'})" style="background-color: rgba(32, 187, 192, 1)">
						<div class="trade_title">竞价交易</div>
						<div class="trade_detail">独特模式 扩大利益</div>
						<img class="trade_icon" :src="require('@/assets/front-img/nav_jjjy.png')" alt="">
					</div>
				</div>
			</div> -->
			
			<!-- 推荐商品 -->
			<div class="recommend_bg">
				<div class="recommend_section">
					<div class="recommend_title_section">
						<div class="recommend_title">推荐商品</div>
						<div class="more_data" @click="$router.push('/front-goodList?type=1')">更多 ></div>
					</div>
					<div style="background-color: rgb(243, 245, 249); padding-top: 15px;">
						<ProductList :list="newProduct.slice(0, 10)" @handleDetail="toDetail"></ProductList>
					</div>
				</div>
			</div>

			<!-- 推荐店铺 -->
			<div class="shop_bg">
				<div class="shop_content">
					<div class="shop_tz">
						<div class="tz_title">推荐店铺</div>
						<div class="more_data" @click="$router.push('/front-shopList')">更多 ></div>
					</div>
					<div class="shop_list">
						<div class="shop_item" v-for="(item) in tuijiangys" :key="item.id" @click="$router.push({path: '/front-shop/home',query:{id: item.id}})">
							<img v-if="item.shopImage" :src="item.shopImage">
							<img v-else :src="require('@/assets/front-img/shop/store-placeholder.png')" alt="">
						</div>
					</div>
				</div>
			</div>

			<!-- 供需大厅 -->
			<div class="supply_bg">
				<div class="supply_content">
					<div class="supply_hall">
						<div class="hall_title">供需大厅</div>
						<div class="type_bg">
							<div :class="['type_title', {'type_title_select' : hallType == ''}]" @click="selectHallType('')">
								全部信息
								<div v-if="hallType == ''" class="type_line"></div>
							</div>
							<div :class="['type_title', {'type_title_select' : hallType == '1'}]" @click="selectHallType('1')">
								供应信息
								<div v-if="hallType == '1'" class="type_line"></div>
							</div>
							<div :class="['type_title', {'type_title_select' : hallType == '2'}]" @click="selectHallType('2')">
								采购信息
								<div v-if="hallType == '2'" class="type_line"></div>
							</div>
						</div>
						<div class="more_data" @click="$router.push('/frontHall')">更多 ></div>
					</div>
					<div class="supply_section">
						<div class="list_title">
							<div class="list_title_item">名称</div>
							<div class="list_title_item">图片</div>
							<div class="list_title_item">报价</div>
							<div class="list_title_item">发布时间</div>
						</div>
						<div class="supply_list_item_section" v-for="(item) in hallList" :key="item.id" @click="handleHallDetail(item)">
							<div class="supply_list_item">
								<div class="supply_list_item_title">
									<div v-if="item.type == 1" class="supply_type_gy">供</div>
									<div v-if="item.type == 2" class="supply_type_cg">购</div>
									<div class="supply_list_item_detail_bg">
										<div class="supply_list_item_name">{{item.name}}</div>
										<!-- <div class="supply_list_item_content">{{item.content}}</div> -->
									</div>
								</div>
								<div class="supply_list_item_img">
									<img :src="item.image" alt="">
								</div>
								<div class="supply_list_item_price">
									<div>￥{{ item.topPrice }}</div>
								</div>
								<div class="supply_list_item_time">
									<div class="item_time">{{ item.createTime }}</div>
                  <div :class="['see_btn', {'see_btn_gy' : item.type == 1}, {'see_btn_cg' : item.type == 2}]">查看</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!--项目合作 -->
			<!-- <div class="project_bg">
				<div class="project_content">
					<div class="project_tz">
						<div class="project_title">项目合作</div>
					</div>
					<div class="project_img_bg">
						<el-carousel height="160px">
							<el-carousel-item v-for="item in xmhzList" :key="item.id">
								<div @click="selectLb(item)" class="project_img_section">
									<img class="project_img" :src="item.imagePc" alt="">
								</div>
							</el-carousel-item>
						</el-carousel>
					</div>
				</div>
			</div> -->

			<!-- 众茶之窗 -->
			<div class="news_bg">
				<div class="news_section">
					<div class="news_title_section">
						<div class="zc_news_title">众茶之窗</div>
						<div class="type_bg">
							<div :class="['type_title', {'type_title_select' : newType == 1}]" @click="selectNewsType(1)">
								新闻资讯
								<div v-if="newType == 1" class="type_line"></div>
							</div>
							<div :class="['type_title', {'type_title_select' : newType == 2}]" @click="selectNewsType(2)">
								茶人茶事
								<div v-if="newType == 2" class="type_line"></div>
							</div>
							<div :class="['type_title', {'type_title_select' : newType == 3}]" @click="selectNewsType(3)">
								商户推荐
								<div v-if="newType == 3" class="type_line"></div>
							</div>
						</div>
						<div class="more_data" @click="$router.push('/front-news')">更多 ></div>
						<div class="bottom_line"></div>
					</div>
					<div class="news_content_bg">
						<div class="news_content_section" v-for="(news) in newsList" :key = news.id @click="newSelect(news)">
							<div class="news_image">
								<img :src="news.image" alt="">
							</div>
							<div class="news_detail_bg">
								<div class="news_detail_title">{{ news.name }}</div>
								<div class="news_detail_content">{{ news.viceName }}</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 合作伙伴 -->
			<div class="partner_bg">
				<div class="partner_section">
					<div class="partner_img" v-for="(item) in hzqyList.slice(0,12)" :key="item.image">
						<img :src="item.image" alt="">
					</div>
				</div>
			</div>

			<!-- 客服 -->
			<div class="float_bg">
				<el-popover
          placement="left"
          width="150"
          trigger="hover">
          <el-image style="width: 120px" :src="require('../../../assets/front-img/kefu.jpg')"></el-image>
					<div slot="reference" class="float_section" @mouseenter="updateFloatIcon(1, 'hover')" @mouseleave="updateFloatIcon(1, '')">
						<div class="float_img"><img :src="getFloatImageUrl(1)"></div>
						<div class="float_title">客服</div>
					</div>
        </el-popover>
				<div class="float_section" @mouseenter="updateFloatIcon(2, 'hover')" @mouseleave="updateFloatIcon(2, '')" @click="backToTop">
					<div class="float_img"><img :src="getFloatImageUrl(2)"></div>
					<div class="float_title">顶部</div>
				</div>
			</div>
			<Footer/>
			<el-dialog title="供需详情" :visible.sync="dialogHallVisible" width="800px">
				<div class="list_section" v-for="(item, index) in header" :key="index">
					<div class="list_label_bg">
						<div class="list_label">{{ item.label }}</div>
					</div>
					<div v-if="item.value == 'type' && selectHallItem.type == 1" class="list_value">供应信息</div>
        	<div v-else-if="item.value == 'type' && selectHallItem.type == 2" class="list_value">采购信息</div>
					<div v-else-if="item.value == 'image'">
						<img v-if="selectHallItem.image && selectHallItem.image.length > 0" :src="selectHallItem.image" width="500" alt="">
					</div>
					<div v-else :class="['list_value', {'price_color' : item.value == 'topPrice'}]">{{ selectHallItem[item.value] }}</div>
				</div>
				<div class="detail_content" v-html="htmlString"></div>
				<div slot="footer" class="dialog-footer">
					<el-button type="primary" @click="dialogHallVisible = false">
						确定
					</el-button>
				</div>
			</el-dialog>
			<div v-if="showVideo" class="video_bg" @click="handleClickVideo()">
				<video class="video" :src="videoSrc" controls="controls" autoplay playsinline></video>
			</div>
		</div>
	</div>
</template>

<script>
	import {mapGetters} from "vuex";
	import Footer from "@/views/front/components/Footer";
	import Header from "@/views/front/components/Header";
	import {Carousel3d,Slide} from 'vue-carousel-3d';
	import {getIndexData,getNewData,pageVoByQo} from "@/api/front-home.js";
	import { pcTradePageByQo } from '@/api/trade'
	import ProductList from "@/views/front/shop/components/ProductList";
	export default {
		name: 'frontHome',
		components: {
			Footer,
			Header,
			Carousel3d,
			Slide,
			ProductList
		},
		data() {
			return {
				gongyingShow: false,
				xiaoshouShow: false,
				gongyingList: [],
				xiaoshouList: [],
				hzqyList: [],
				sylbtList: [],
				xwzxList: [],
				zhzxList: [],
				zjjtList: [],
				gyxxList: [],
				cgxxList: [],
				tuijiangys: [],
				newsTab: '新闻资讯',
				newProduct: [],
				currentOffset: 0,
				news: [],
				chayeList: [],
				notice: '',
				selectIconIndex: '',
				selectFloatIconIndex: '',
				userName:"",
				hallType: '',
				newType: 1,
				hallList: [],
				xmhzList: [],
				newsList: [],
				isMoving: false,
				interval: null,
				dialogHallVisible: false,
				selectHallItem: {},
				header: [
					{label: '供需标题', value: "name"},
					{label: '图片', value: "image"},
        	{label: '规格', value: "specs"},
					{label: '价格(元)', value: "topPrice"},
					{label: '联系人', value: "connectName"},
					{label: '联系电话', value: "connectPhone"},
					{label: '供需类别', value: "type"},
				],
				htmlString: '',
				showVideo: false,
				videoSrc: ''
			};
		},
		computed: {
			...mapGetters(["userInfo",'token']),
			newsTabCode() {
				return this.newsTab === '专家团队' ? 'forum' : this.newsTab === '茶艺师团队' ? 'exhibition' : 'news'
			},
		},
		created() {
			// if (this.isMobile()) {
			// 	this.$router.replace({ path: "/profile/index"});
			// }
			this.updateUserName();
			this.getIndexData();
			this.getNews(); //获取第一条新闻\
			this.selectNewsType(1);
			this.pageVoByQo();
			this.getNotice()
			this.getTradeList('')
		},
		updated() {
		},
		methods: {
			pageVoByQo() {
				return new Promise((resolve, reject) => {
					pageVoByQo({
							companyType:1
						})
						.then(res => {
							this.chayeList = res;
							resolve(res);
						})
						.catch(err => {
							reject(err);
						});
				});
			},
			//登录 注册
			toLogin(type) {
				const redirect = this.$route.fullPath;
				this.$router.push({
					path: `/login?redirect=${redirect}&type=${type}`
				});
			},
			//退出登录
			async logout() {
				await this.$store.dispatch("user/logout");
				this.$router.push(`/login?redirect=${this.$route.fullPath}`);
        WebIM.conn.close();
			},
			// 获取第一条新闻
			getNews() {
				getNewData({
					pageNo: 1,
					pageSize: 1,
					code$in: "news",
				}).then((res) => {
					this.news = res.list[0];
					this.total = res.totalCount;
				});
			},
			getIndexData() {
				getIndexData({type:1}).then((res) => {
					this.newProduct = res.lastnew_products || []
					this.gongyingList = res.gongying_category || [];
					this.xiaoshouList = res.xiaoshou_category || [];
					this.hzqyList = res.hzqy || [];
					this.sylbtList = res.sylbt || [];
					this.xwzxList = res.xwzx || [];
					this.zhzxList = res.zhzx || [];
					this.zjjtList = res.zjjt || [];
					this.tuijiangys = res.tuijiangys || [];
					this.gyxxList = res.gyxx || [];
					this.cgxxList = res.cgxx || [];
					this.xmhzList = res.xmhz || [];
				});
			},
			getTradeList(type) {
				let listQuery;
				if (type == '') {
					listQuery = {status: 2, pageNo: 1, pageSize: 5}
				} else {
					listQuery = { type: type,status: 2, pageNo: 1, pageSize: 5}
				}
				pcTradePageByQo(listQuery).then(response => {
					this.hallList = response.list || []
				}).catch(error => {
					console.log(error);
					this.listLoading = false
				})
			},
			toShop(id) {
				this.$router.push({
					path: "/front-shop/home",
					query: {
						id: id
					}
				});
			},
			// 跳转资讯详情
			newSelect(item) {
				this.$router.push({
					path: "/front-newDetail",
					query: {
						id: item.id
					},
				});
			},
			selectLb(item) {
				// 三种paramType==1-》跳到商户，paramType==99-》跳到指定商户，其他不动
				if (item.param) {
					if (item.paramType == 1) {
						this.$router.push({
							path: "/front-shop/home",
							query: {
								id: item.param
							},
						});
					} else if (item.paramType == 99) {
						if (item.identifier == '99') { // 播放视频
							this.showVideo = true
							this.videoSrc = item.param
						} else {
							window.location.href = item.param;
						}
					}
				}
			},
			toProductDetail(id, productId) {
				console.log(productId);
				this.$router.push({
					path: "/front-shop/productDetail",
					query: {
						id,
						productId
					},
				});
			},
			newsTabHover(name) {
				this.newsTab = name
			},
			isMobile() {
				let screenWidth = document.body.clientWidth;
				return screenWidth < 750 ? true : false;
			},
			getNotice() { // 获取平台快讯
				getNewData({code : 'allNews'}).then(response => { 
					if (response.list && response.list.length > 0) {
						this.notice = response.list[0].name;
					}
				}).catch(error => {
					console.log(error);
				})
			},
			getImageUrl(index) {
				let i = index + 1
				if (this.selectIconIndex === index) {
					return require("@/assets/front-img/select_icon_0" + i + ".png")
				} else {
					return require("@/assets/front-img/nav_icon_0" + i + ".png")
				}
			},
			updateIcon(index, state) {
				if (state === 'hover') {
					this.selectIconIndex = index
				} else {
					this.selectIconIndex = ''
				}
			},
			updateUserName() {
				let userInfo = Object.assign({}, this.$store.getters.userInfo);
				if (userInfo && userInfo.id) {
					let type = userInfo.type === 1 ? '采购商' : '供应商';
					
					if (userInfo.name) {
						this.userName = `（${type}）${userInfo.name}`
					} else {
						this.userName = `${type}`;
					}
				} else {
					this.userName = "";
				}
			},
			toBackend() {
				this.$router.push({
					path: this.getFirstRouter(this.$store.state.permission.addRoutes)
				});
			},
			getFirstRouter(routers) {
				let router = "";
				function findChildren(routers) {
					router += router ? "/" + routers.path : routers.path;
					if (routers.children && routers.children.length > 0) {
						findChildren(routers.children[0]);
					}
				}
				//此处长度为1时是404页面，也不取
				if (routers && routers.length > 1) {
					findChildren(routers[0]);
				} else {
					router = "/profile/index";
				}
				return router;
			},
			selectHallType(type) {
				this.hallType = type
				this.getTradeList(type)
			},
			toDetail(goodItem) {
        this.$router.push({
          path: "/front-shop/productDetail",
          query: {
            id: goodItem.gongyingId,
            productId: goodItem.id
          }
        });

        //新建窗口打开
        // const { href } = this.$router.resolve({
        //   path: "/front-shop/productDetail",
        //   query: {
        //     id: goodItem.gongyingId,
        //     productId: goodItem.id
        //   }
        // });
        // window.open(href, '_blank');
      },
			selectNewsType(type) {
				this.newType = type
				let code = ''
				if (type == 1) {
					code = 'news'
				} else if (type == 2) {
					code = 'forum'
				} else {
					code = 'exhibition'
				}

				// 获取新闻,茶人茶事,商户推荐
				let data = {
					pageNo: 1,
					pageSize: 2,
					code$in: code,
				};
				getNewData(data).then((res) => {
					this.newsList = res.list || [];
				});
			},
			getFloatImageUrl(index) {
				if (index == 1) {
					if (this.selectFloatIconIndex === index) {
						return require("@/assets/front-img/icon_white_service.png")
					} else {
						return require("@/assets/front-img/icon_service.png")
					}
				} else {
					if (this.selectFloatIconIndex === index) {
						return require("@/assets/front-img/icon_white_backToTop.png")
					} else {
						return require("@/assets/front-img/icon_backToTop.png")
					}
				}
			},
			updateFloatIcon(index, state) {
				if (state === 'hover') {
					this.selectFloatIconIndex = index
				} else {
					this.selectFloatIconIndex = ''
				}
			},
			backToTop() {
				if (this.isMoving) return
				const start = window.pageYOffset
				let i = 0
				this.isMoving = true
				this.interval = setInterval(() => {
					const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500))
					if (next <= 0) {
						window.scrollTo(0, 0)
						clearInterval(this.interval)
						this.isMoving = false
					} else {
						window.scrollTo(0, next)
					}
					i++
				}, 16.7)
			},
			easeInOutQuad(t, b, c, d) {
				if ((t /= d / 2) < 1) return c / 2 * t * t + b
				return -c / 2 * (--t * (t - 2) - 1) + b
			},
			handleHallDetail(item) {
				this.dialogHallVisible = true
      	this.selectHallItem = item
				this.htmlString = item.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');
			},
			handleClickVideo() {
				this.showVideo = false
			}
		},
	};
</script>
<style>
	.home .el-tabs--border-card {
		box-shadow: none;
		border: none;
		padding: 10px 0;
	}

	.home .el-tabs__item {
		width: 150px;
		font-size: 16px;
	}

	.home .el-tabs__nav {
		text-align: center;
		float: none;
		background: none;
	}

	.home .el-tabs--border-card>.el-tabs__header {
		background: none;
		border: none;
	}

	.home .el-tabs--border-card>.el-tabs__header .el-tabs__item {
		border: none;
	}

	.home .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
		color: #965f29;
	}

	.home .el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover {
		color: #965f29;
	}
</style>

<style lang="scss" scoped>
	.home {
		background-color: rgb(243, 245, 249);
		.home-container {
			position: relative;
			.header {
				border-bottom: 1px solid #e5e5e5;
				height: 48px;

				.header-container {
					color: #282828;
					margin: 0 auto;
					width: 1300px;
					height: 100%;
					line-height: 48px;
					display: flex;
					justify-content: space-between;
					align-items: center;

					font-size: 14px;
					font-family: Microsoft YaHei;
					font-weight: 300;

					.line {
						padding: 0 9px;
					}
				}
			}

			.banner_bg {
				width: 100%;
				padding-top: 15px;
				display: flex;
				justify-content: center;

				.banner_content {
					width: 1300px;
					height: 420px;
					position: relative;
					display: flex;
					z-index: 1;

					.nav_bg {
						// position: absolute;
						display: flex;
						flex-direction: column;
						// top: 0;
						// left: 0;
						z-index: 99;
						width: 158px;
						height: 100%;
						background-color: white;

						.nav_item {
							flex: 1;
							display: flex;
							align-items: center;
							color: rgba(51, 51, 51, 1);
							font-size: 14px;
							@include mainColorBtn;
							cursor: pointer;

							.nav_icon {
								margin-left: 15px;
								width: 25px;
								height: 25px;
								object-fit: cover;
								margin-right: 10px;
							}
						}
					}

					.banner {
						margin-left: 12px;
						width: 900px;
						cursor: pointer;
					}

					.right_section {
						margin-left: 12px;
						width: 218px;
						height: 420px;
						background-color: white;

						.login {
							width: 100%;
							background-color: #FFFFFF;

							.imgs {
								margin-top: 35px;
								text-align: center;

								>img {
									width: 76px;
									height: 76px;
									// border-radius: 50%;
								}
							}

							.hi {
								margin-left: 10px;
								width: calc(100% - 20px);
								line-height: 18px;
								text-align: center;
								color: rgba(51, 51, 51, 1);
								font-size: 14px;
							}

							.button {
								margin-top: 14px;
								display: flex;
								justify-content: space-around;

								.left_btn {
									width: 80px;
									height: 34px;
									background: rgba(14, 131, 192, 1);
									border-radius: 5px;
									color: white;
									line-height: 34px;
									font-size: 14px;
									text-align: center;
									cursor: pointer;
								}

								.right_btn {
									width: 80px;
									height: 34px;
									background: rgba(255, 255, 255, 1);
									border: 1px solid rgba(14, 131, 192, 1);
									border-radius: 5px;
									color: rgba(14, 131, 192, 1);
									line-height: 34px;
									font-size: 14px;
									text-align: center;
									cursor: pointer;
								}
							}

							.line {
								margin-top: 25px;
								margin-left: 15px;
								width: 188px;
								height: 1px;
								background: rgba(218, 224, 232, 1);
							}
						}

						.news {
							margin-top: 15px;
							width: 218px;

							.news_title {
								margin-left: 15px;
								width: 42px;
								height: 18px;
								background: rgba(255, 235, 235, 1);
								color: rgba(252, 38, 38, 1);
								font-size: 12px;
								line-height: 18px;
								text-align: center;
							}

							.news_content {
								margin: 5px 10px;
								height: 165px;
								overflow: auto;
								font-size: 12px;
							}
						}
					}

					.bg-img {
						width: 100%;
						height: 100%;
						background-size: cover;
						background-position: center;

						img {
							width: 100%;
						}
					}
				}
			}

			.trade_bg {
				width: 100%;
				margin-top: 30px;
				display: flex;
				justify-content: center;

				.trade_content {
					width: 1300px;
					height: 130px;
					position: relative;
					display: flex;
					justify-content: space-between;
				}

				.trade_section {
					position: relative;
					flex: 1;
					height: 130px;
					cursor: pointer;

					.trade_title {
						margin-left: 30px;
						margin-top: 25px;
						height: 37px;
						line-height: 37px;
						color: rgba(255, 255, 255, 1);
						font-size: 28px;
					}

					.trade_detail {
						margin-left: 30px;
						margin-top: 8px;
						height: 21px;
						line-height: 21px;
						color: rgba(255, 255, 255, 1);
						font-size: 16px;
					}

					.trade_icon {
						position: absolute;
						right: 10px;
						top: 20px;
					}
				}
			}

			.shop_bg {
				width: 100%;
				margin-top: 20px;
				display: flex;
				justify-content: center;

				.shop_content {
					width: 1300px;
					height: 198px;
					position: relative;
					background-color: #fff;

					.shop_tz {
						position: relative;
						width: 100%;
						height: 70px;

						.tz_title {
							margin-left: 20px;
							height: 70px;
							color: rgba(51, 51, 51, 1);
							font-size: 24px;
							line-height: 70px;
						}
					}

					.shop_list {
						margin-left: 20px;
						width: calc(100% - 40px);
						display: flex;
						justify-content: space-between;

						.shop_item {
							width: 108px;
							height: 108px;
							border: 1px solid rgba(204, 204, 204, 1);
							cursor: pointer;

							img {
								width: 100%;
								height: 100%;
							}

							&:hover,
							&:focus,
							&:visited {
								// box-shadow: 0 0 5px 1px rgba(252, 38, 38, 1);
								border: 1px solid rgba(252, 38, 38, 1);
								cursor: pointer;
							}
						}
					}
				}
			}

			.supply_bg {
				width: 100%;
				margin-top: 20px;
				display: flex;
				justify-content: center;

				.supply_content {
					width: 1300px;
					position: relative;
					background-color: #fff;

					.supply_hall {
						display: flex;
						position: relative;
						width: 100%;
						height: 70px;

						.hall_title {
							margin-left: 20px;
							height: 70px;
							color: rgba(51, 51, 51, 1);
							font-size: 24px;
							line-height: 70px;
						}
					}

					.supply_section {
						position: relative;
						width: 100%;

						.list_title {
							display: flex;
							justify-content: space-between;
							margin-left: 20px;
							width: calc(100% - 40px);
							height: 36px;
							background: rgba(244, 247, 250, 1);

							.list_title_item {
								width: 100px;
								height: 36px;
								flex: 1;
								line-height: 36px;
								color: rgba(102, 102, 102, 1);
								font-size: 14px;
								font-weight: 400;
								text-align: center;
							}
						}

						.supply_list_item_section {
							width: 100%;
							height: 96px;
							border: 1px solid white;
							box-sizing:border-box;

							&:hover,
							&:focus,
							&:visited {
								// box-shadow: 0 0 5px 1px rgba(252, 38, 38, 1);
								border: 1px solid rgba(252, 38, 38, 1);
								cursor: pointer;
							}

							.supply_list_item {
								margin-left: 20px;
								width: calc(100% - 40px);
								height: 100%;
								display: flex;
								box-sizing:border-box;
								border-top: 1px solid rgba(218, 224, 232, 1);

								.supply_list_item_title {
									flex: 1;
									height: 100%;
									display: flex;
									align-items: center;

									.supply_type_gy {
										width: 18px;
										height: 18px;
										background: rgba(14, 131, 192, 1);
										border-radius: 4px;
										color: rgba(255, 255, 255, 1);
										font-size: 12px;
										font-weight: 400;
										line-height: 18px;
										text-align: center;
									}

									.supply_type_cg {
										width: 18px;
										height: 18px;
										background: rgba(43, 164, 74, 1);;
										border-radius: 4px;
										color: rgba(255, 255, 255, 1);
										font-size: 12px;
										font-weight: 400;
										line-height: 18px;
										text-align: center;
									}

									.supply_list_item_detail_bg {
										padding-left: 13px;
										width: calc(100% - 18px);

										.supply_list_item_name {
											height: 21px;
											color: rgba(51, 51, 51, 1);
											line-height: 21px;
											font-size: 16px;
											font-weight: 400;
											@include ellipsis($line: 1);
										}

										.supply_list_item_content {
											margin-top: 5px;
											width: 100%;
											height: 18px;
											color: rgba(153, 153, 153, 1);
											line-height: 18px;
											font-size: 14px;
											font-weight: 400;
											@include ellipsis($line: 1);
										}
									}
								}

								.supply_list_item_img {
									height: 100%;
									flex: 1;
									display: flex;
									align-items: center;
									justify-content: center;

									img {
										height: 100%;
									}
								}

								.supply_list_item_price {
									height: 100%;
									flex: 1;
									display: flex;
									align-items: center;
									justify-content: center;
									color: rgba(252, 38, 38, 1);
									font-size: 14px;
									font-weight: 400;
								}

								.supply_list_item_time {
									position: relative;
									height: 100%;
									flex: 1;
									display: flex;
									align-items: center;
									justify-content: center;

									.item_time {
										color: rgba(102, 102, 102, 1);
										font-size: 14px;
										font-weight: 400;
									}

									.see_btn {
										position: absolute;
										top: 32px;
										right: 0;
										width: 60px;
										height: 30px;
										color: rgba(255, 255, 255, 1);
										font-size: 12px;
										font-weight: 400;
										line-height: 30px;
										text-align: center;
										border-radius: 4px;
										cursor: pointer;
									}

									.see_btn_gy {
										background: rgb(37, 115, 183);
									}

									.see_btn_cg {
										background: rgb(29, 156, 66);
									}
								}
							}
						}
					}
				}
			}

			.project_bg {
				width: 100%;
				margin-top: 20px;
				display: flex;
				justify-content: center;

				.project_content {
					width: 1300px;
					height: 250px;
					position: relative;
					background-color: #fff;

					.project_tz {
						position: relative;
						width: 100%;
						height: 70px;

						.project_title {
							margin-left: 20px;
							height: 70px;
							color: rgba(51, 51, 51, 1);
							font-size: 24px;
							line-height: 70px;
						}
					}

					.project_img_bg {
						margin-left: 20px;
						width: calc(100% - 40px);
						height: 160px;

						.project_img_section {
							height: 100%;
							display: flex;
							justify-content: center;
							cursor: pointer;

							.project_img {
								width: auto;
								height: 100%;
							}
						}
					}
				}
			}

			.recommend_bg {
				width: 100%;
				margin-top: 20px;
				display: flex;
				justify-content: center;

				.recommend_section {
					width: 1300px;
					position: relative;
					background-color: #fff;

					.recommend_title_section {
						position: relative;
						width: 100%;
						height: 70px;

						.recommend_title {
							margin-left: 20px;
							height: 70px;
							color: rgba(51, 51, 51, 1);
							font-size: 24px;
							line-height: 70px;
						}
					}
				}
			}

			.news_bg {
				width: 100%;
				margin-top: 20px;
				display: flex;
				justify-content: center;

				.news_section {
					width: 1300px;
					position: relative;
					background-color: #fff;

					.news_title_section {
						position: relative;
						display: flex;
						width: 100%;
						height: 70px;

						.zc_news_title {
							margin-left: 20px;
							height: 70px;
							color: rgba(51, 51, 51, 1);
							font-size: 24px;
							line-height: 70px;
						}

						.bottom_line {
							position: absolute;
							left: 20px;
							bottom: 0px;
							right: 0px;
							height: 1px;
							background: rgba(218, 224, 232, 1);
						}
					}

					.news_content_bg {
						display: flex;
						width: 100%;
						height: 176px;

						.news_content_section {
							display: flex;
							margin-left: 30px;
							margin-top: 30px;
							width: 570px;
							height: 116px;
							cursor: pointer;

							&:nth-child(2) {
								margin-left: 100px;
							}

							.news_image {
								width: 160px;
								height: 100%;

								img {
									width: 100%;
									height: 100%;
								}
							}

							.news_detail_bg {
								margin-left: 30px;
								width: 380px;
								height: 100%;

								.news_detail_title {
									width: 100%;
									color: rgba(56, 56, 56, 1);
									font-size: 18px;
									font-weight: 400;
									line-height: 24px;
									@include ellipsis($line: 1);
								}

								.news_detail_content {
									margin-top: 12px;
									color: rgba(153, 153, 153, 1);
									font-size: 13px;
									line-height: 20px;
									font-weight: 400;
									overflow: hidden;
									@include ellipsis($line: 4);
								}
							}
						}
					}
				}
			}

			.partner_bg {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 136px;
				margin-top: 20px;
				background-color: #fff;

				.partner_section {
					position: relative;
					display: flex;
					justify-content: space-between;
					width: 1300px;
					height: 90px;

					.partner_img {
						display: flex;
						align-items: center;
						width: 90px;
						height: 90px;

						img {
							width: 100%;
							height: auto;
						}
					}
				}
			}

			.float_bg {
				position: fixed;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				bottom: 50px;
				left: calc(50% + 670px);
				width: 60px;
				height: 121px;
				background-color: rgb(243, 245, 249);

				.float_section {
					position: relative;
					width: 100%;
					height: 60px;
					color: rgba(56, 56, 56, 1);
					background-color: #fff;
					cursor: pointer;

					&:hover {
						color: rgba(255, 255, 255, 1);
						background-color: rgba(14, 131, 192, 1);
					}

					.float_img {
						position: absolute;
						top: 10px;
						left: 20px;
						width: 20px;
						height: 19px;

						img {
							width: 100%;
							height: auto;
						}
					}

					.float_title {
						position: absolute;
						top: 36px;
						left: 0px;
						width: 100%;
						height: 18px;
						font-size: 12px;
						line-height: 18px;
						font-weight: 400;
						text-align: center;
					}
				}
			}
		}
	}

	.more_data {
		position: absolute;
		top: 0;
		right: 20px;
		height: 70px;
		color: rgba(14, 131, 192, 1);
		font-size: 14px;
		line-height: 70px;
		cursor: pointer;

		&:hover {
			color: rgba(252, 38, 38, 1);
		}
	}

	.type_bg {
		display: flex;
		position: relative;
		margin-left: 59px;
		align-items: center;
		height: 100%;

		.type_title {
			margin-left: 30px;
			height: 18px;
			color: rgba(102, 102, 102, 1);
			font-size: 14px;
			font-weight: 400;
			line-height: 14px;
			cursor: pointer;

			&:nth-child(1) {
				margin-left: 0px;
			}

			&:hover {
				color: rgba(14, 131, 192, 1);

				// &:before {
				// 	content: '';
				// 	width: 56px;
				// 	height: 2px;
				// 	background: rgba(14, 131, 192, 1);
				// 	border-radius: 80px;
				// 	position: absolute;
				// 	top: 45px;
				// }
			}

			.type_line {
				margin-top: 2px;
				width: 56px;
				height: 2px;
				background-color: rgba(14, 131, 192, 1);
			}
		}

		.type_title_select {
			color: rgba(14, 131, 192, 1);
		}
	}

	.list_section {
    position: relative;
    display: flex;
    border-top: 1px solid rgba(218, 224, 232, 1);
    border-left: 1px solid rgba(218, 224, 232, 1);
    border-right: 1px solid rgba(218, 224, 232, 1);

    &:nth-child(6) {
      border-bottom: 1px solid rgba(218, 224, 232, 1);
    }

    .list_label_bg {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 110px;
      min-height: 51px;
      background: rgba(244, 247, 250, 1);
      border-right: 1px solid rgba(218, 224, 232, 1);

      .list_label {
        width: 110px;
        color: rgba(51, 51, 51, 1);
        font-size: 14px;
        font-weight: 400;
        text-align: center;
        line-height: 51px;
      }
    }

    .list_value {
      padding: 16px 16px 16px 27px;
    }

    .price_color {
      color: red;
    }
  }

	.detail_content {
		margin-top: 10px;
	}

	.video_bg {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
    background: rgba(0, 0, 0, 0.3);
		z-index: 100;

		.video {
			width: 1300px;
			height: 600px;
			@include abs-center;
		}
	}

	.left_bg {
		position: absolute;
		top: 0;
		left: 0;
		width: calc(calc(100% - 1300px) / 2);
		height: calc(100% - 126px);
		// background-image: url(../../../assets/front-img/front_home_middle_logo_left_bg.png);
		// background-size: 100%;
		// background-repeat:repeat;
	}

	.right_bg {
		position: absolute;
		top: 0;
		right: 0;
		width: calc(calc(100% - 1300px) / 2);
		height: calc(100% - 126px);
		// background-image: url(../../../assets/front-img/front_home_middle_logo_right_bg.png);
		// background-repeat:repeat;
	}
	.side_logo {
		position: fixed;
		top: 176px;
		width: calc(calc(100% - 1300px) / 2);
	}
</style>
